<template>
	<view>
		<Tab :tabbar="0"></Tab>
		<view class="home-box">
			<view class="home-top">
				<view class="home-top-img">
					<view style="width: 100%;height: 30px; position: relative;"></view>
					<view>
						<u-search style='width: 70%; opacity: 0.7;padding-left: 20px;display: block;' class='search'
							placeholder="请输入你想要的商品名称" actionText='' v-model="keyword"></u-search>
						<u-button @click='search()'
							style='width:68px;height:35px;border-radius: 30px;opacity: 0.7;position: absolute;top: 30px;right:19px;'
							text="搜索"></u-button>
					</view>
					<u-swiper width='120' bgColor="rgba(220,38,38,0)" height='300upx' :list="list3" previousMargin="30"
						nextMargin="30" circular :autoplay="false" radius="30"></u-swiper>
				</view>
			</view>
			<view class="home-nav">
				<view @click='JumpClassification()' class="home-nav-box" style="width: 15%;height: 100%;">
					<view style="width:100upx; border-radius:100% ; height: 100upx;background: #75e0ff;">
						<img style='width: 60upx;margin-top: 27upx;margin-left: 23upx;'
							src='http://127.0.0.1:7001/public/whj/xiangji.png ' />
					</view>
					<span style='display: block; margin-top:10upx;font-size: 13px;color: #e4e4e4;'>数码电视</span>
				</view>
				<view @click='JumpClassification()' class="home-nav-box" style="width: 15%;height: 100%;">
					<view style="width: 100upx; border-radius:100% ; height: 100upx;background: #c1c6fc;">
						<img style='width: 53upx;margin-top: 27upx;margin-left: 27upx;'
							src='http://127.0.0.1:7001/public/whj/2222.png ' />
					</view>
					<span style='display: block; margin-top:10upx;font-size: 13px;color: #e4e4e4;'>图书文具</span>
				</view>
				<view @click='JumpClassification()' class="home-nav-box" style="width: 15%;height: 100%;">
					<view style="width: 100upx; border-radius:100% ; height: 100upx;background: #ffc47f;">
						<img style='width: 54upx;margin-top: 26upx;margin-left: 26upx;'
							src='http://127.0.0.1:7001/public/whj/3333.png ' />
					</view>
					<span style='display: block; margin-top:10upx;font-size: 13px;color: #e4e4e4;'>服饰鞋包</span>
				</view>
				<view @click='JumpClassification()' class="home-nav-box" style="width: 15%;height: 100%;">
					<view style="width: 100upx; border-radius:100% ; height: 100upx;background: #ff8fb4;">
						<img style='width: 50upx;margin-top: 22upx;margin-left: 28upx;'
							src='http://127.0.0.1:7001/public/whj/4444.png ' />
					</view>
					<span style='display: block; margin-top:10upx;font-size: 13px;color: #e4e4e4;'>美妆闲置</span>
				</view>
				<view @click='JumpClassification()' class="home-nav-box" style="width: 15%;height: 100%;">
					<view style="width: 100upx; border-radius:100% ; height: 100upx;background: #72e56a;">
						<img style='width: 50upx;margin-top: 27upx;margin-left: 28upx;'
							src='http://127.0.0.1:7001/public/whj/5555.png ' />
					</view>
					<span 
						style='display: block; margin-top:10upx;font-size: 13px;color: #e4e4e4;'>全部分类</span>
				</view>
			</view>

			<view class="aixin">
				<view class="aixin-top">
					<view><img style='width: 15upx;margin-top: 30upx;margin-left: 6upx;'
							src='http://127.0.0.1:7001/public/whj/juxing.png ' />
						<span
							style='font-size: 44upx;font-weight: 700;margin-top: -66upx;margin-left: 36upx;display: block;'>爱心公益</span>
					</view>
					<view>
						<span @click='gengduo()'
							style='font-size: 14px;margin-top: 18px;margin-left: -85px;display: block;'>查看更多</span>
						<u-icon style='margin-top: -17px;margin-left: -28px;' name="arrow-right"></u-icon>
					</view>
				</view>
				<view style="width: 95%;height: 220upx;margin: 0 auto;">
					<img @click='tiao1()'  style='width: 100%;height: 100%;' src='http://127.0.0.1:7001/public/whj/tu.png' />
				</view>
				<view style="display: flex;justify-content: space-between">
					<view>
						<img @click="aixintz()" style='width:45upx;height: 45upx;margin-top: 20upx;margin-left: 30upx;'
							src='http://127.0.0.1:7001/public/whj/aixin.png' />
						<span
							style='color: #f11673;font-size:26upx;margin-top: -46upx;margin-left: 82upx;display: block;'>爱回收绿色公益</span>
						<p style='margin-top: 20upx;margin-left: 30upx;font-size: 24upx;'>捐赠你的一份爱心 温暖!</p>
					</view>
					<view style="display: flex;margin-top: 77upx;">
						<view>
							<img style='width: 30upx;height: 30upx;margin-left: 10upx;'
								src='http://127.0.0.1:7001/public/whj/zhan.png' />
							<span
								style='font-size: 28upx;margin-left: 48upx;margin-top: -40upx;display: block;'>123</span>
						</view>
						<view>
							<img style='width: 30upx;height: 25upx;margin-left: 10upx;'
								src='http://127.0.0.1:7001/public/whj/yulan.png' />
							<span
								style='font-size: 28upx;margin-left: 48upx;margin-top: -40upx;display: block;'>123</span>
						</view>
						<view>
							<img style='width: 30upx;height: 30upx;margin-left: 10upx;'
								src='http://127.0.0.1:7001/public/whj/pinglun.png' />
							<span
								style='font-size: 28upx;margin-left: 48upx;margin-top: -40upx;display: block;'>123</span>
						</view>
						<view style="width: 20upx;height: 100%;"></view>
					</view>
				</view>
			</view>
			<view class="square">
				<view class="square-top">
					<view><img style='width: 15upx;margin-top: 30upx;margin-left: 6upx;'
							src='http://127.0.0.1:7001/public/whj/juxing.png ' />
						<span
							style='font-size: 44upx;font-weight: 700;margin-top: -66upx;margin-left: 36upx;display: block;'>广场话题</span>
					</view>
					<view>
						<span @click='tiao()' style='font-size: 14px;margin-top: 18px;margin-left: -85px;display: block;'>查看更多</span>
						<u-icon style='margin-top: -17px;margin-left: -28px;' name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="square-con">
					<u-scroll-list>
						<view v-for="item in list" :key="item.id">
							<view
								style="width: 500upx;height: 475upx;margin-right: 50upx;border-radius: 30upx;box-shadow: 1px 1px 4px #f8eeee;">
								<view style="width: 100%;height: 10upx;"></view>
								<view style="width: 85%;margin: 0 auto;font-size: 14px;">{{item.introduce}}</view>
								<img @click='huati(item)' style='width: 90%;margin-left: 27upx;margin-top: 5upx;'
									:src='item.headPortrait' />
								<view style="width: 90%;height: 150upx;margin: 0 auto;display: flex;">
									<view style="width: 100upx;height: 100upx;">
										<img style='width: 100%;margin-top: 10upx;' :src='item.topicImg' />
									</view>

									<view style="margin-left: 15upx;">
										<span style='display: block;margin-top: 28upx;'>{{item.authorName}}</span>
										<span style='font-size: 13px;color: #999;'>粉丝:{{item.fans}}
											关注:{{item.follow}}</span>
									</view>
									<view style="margin-top: 34upx;margin-left: 24upx;">
										<view>
											<img style='width: 25upx;'
												src='http://127.0.0.1:7001/public/whj/shouchang (2).png ' />
											<span style='margin-left: 10upx;font-size: 13px;'>289</span>
										</view>
										<view>
											<img style='width: 25upx;'
												src='http://127.0.0.1:7001/public/whj/shouchang (1).png ' />
											<span style='margin-left: 10upx;font-size: 13px;'>1829</span>
										</view>
									</view>
								</view>
							</view>

						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="tuijian">
				<view class="tuijian-top" style="display: flex;">
					<u-sticky bgColor="#fff">
						<u-tabs style='margin-left: 20upx;' @click="click" :list="tabList"></u-tabs>
					</u-sticky>
				</view>
				<view style="width: 100%;margin: 0 auto;height:1500upx;">
					<!-- 推荐 -->
					<view v-for="item in shopList" v-show='tabs==0'
						style="width: 46%; height: 440upx;box-shadow: 1px 1px 4px #f8eeee;float: left;margin-top: 40upx;border-radius: 20px;margin-left:20upx">
						<img @click="DisGoods(item)"
							style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
							:src='item.url' />
						<view style="width: 100%;height: 30upx;">
							<span style='color:#b4b4b4;font-size: 15upx;margin-left: 20upx; '>{{item.name}}</span>
						</view>
						<view
							style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
							<view>
								<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
									<span style='font-size: 20px;'>{{item.price}}</span>
								</span>
							</view>
							<view>
								<span
									style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
							</view>
						</view>
						<view
							style="width: 90%;height: 90upx;margin: 0 auto;display: flex; border-top:1px solid #f1f1f1;margin-top: 15upx;">
							<img style='width: 25%;margin-top: 15upx;'
								src='http://127.0.0.1:7001/public/whj/touxiang.png' />
							<view style="width: 70%;height: 100%;margin-left: 5%;">
								<span style='display: block;margin-top: 20upx;'>用户名</span>
								<p style='display: block;font-size:12upx;width: 234upx'>
									粉丝：{{item.fans}}关注：{{item.follow}}</p>
							</view>


						</view>
					</view>
					<!--  -->
					<view v-for="item in news" v-show='tabs==1'
						style="width: 46%; height: 440upx;box-shadow: 1px 1px 4px #f8eeee;float: left;margin-top: 40upx;border-radius: 20px;margin-left:20upx">
						<img @click="DisGoods(item)"
							style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
							:src='item.url' />
						<view style="width: 100%;height: 30upx;">
							<span style='color:#b4b4b4;font-size: 15px;margin-left: 20upx; '>{{item.name}}</span>
						</view>
						<view
							style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
							<view>
								<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
									<span style='font-size: 20px;'>{{item.price}}</span>
								</span>
							</view>
							<view>
								<span
									style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
							</view>
						</view>
						<view
							style="width: 90%;height: 90upx;margin: 0 auto;display: flex; border-top:1px solid #f1f1f1;margin-top: 15upx;">
							<img style='width: 25%;margin-top: 15upx;'
								src='http://127.0.0.1:7001/public/whj/touxiang.png' />
							<view style="width: 70%;height: 100%;margin-left: 5%;">
								<span style='display: block;margin-top: 20upx;'>用户名</span>
								<p style='display: block;font-size:12upx;width: 234upx'>
									粉丝：{{item.fans}}关注：{{item.follow}}</p>
							</view>


						</view>
					</view>
					<!--  -->
					<view v-for="item in item1" v-show='tabs==2'
						style="width: 46%; height: 440upx;box-shadow: 1px 1px 4px #f8eeee;float: left;margin-top: 40upx;border-radius: 20px;margin-left:20upx">
						<img @click="DisGoods(item)"
							style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
							:src='item.url' />
						<view style="width: 100%;height: 30upx;">
							<span style='color:#b4b4b4;font-size: 15px;margin-left: 20upx; '>{{item.name}}</span>
						</view>
						<view
							style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
							<view>
								<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
									<span style='font-size: 20px;'>{{item.price}}</span>
								</span>
							</view>
							<view>
								<span
									style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
							</view>
						</view>
						<view
							style="width: 90%;height: 90upx;margin: 0 auto;display: flex; border-top:1px solid #f1f1f1;margin-top: 15upx;">
							<img style='width: 25%;margin-top: 15upx;'
								src='http://127.0.0.1:7001/public/whj/touxiang.png' />
							<view style="width: 70%;height: 100%;margin-left: 5%;">
								<span style='display: block;margin-top: 20upx;'>用户名</span>
								<p style='display: block;font-size:12upx;width: 234upx'>
									粉丝：{{item.fans}}关注：{{item.follow}}</p>
							</view>


						</view>
					</view>
					<!--  -->
					<view v-for="item in item2" v-show='tabs==3'
						style="width: 46%; height: 440upx;box-shadow: 1px 1px 4px #f8eeee;float: left;margin-top: 40upx;border-radius: 20px;margin-left:20upx">
						<img @click="DisGoods(item)"
							style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
							:src='item.url' />
						<view style="width: 100%;height: 30upx;">
							<span style='color:#b4b4b4;font-size: 15px;margin-left: 20upx; '>{{item.name}}</span>
						</view>
						<view
							style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
							<view>
								<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
									<span style='font-size: 20px;'>{{item.price}}</span>
								</span>
							</view>
							<view>
								<span
									style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
							</view>
						</view>
						<view
							style="width: 90%;height: 90upx;margin: 0 auto;display: flex; border-top:1px solid #f1f1f1;margin-top: 15upx;">
							<img style='width: 25%;margin-top: 15upx;'
								src='http://127.0.0.1:7001/public/whj/touxiang.png' />
							<view style="width: 70%;height: 100%;margin-left: 5%; ">
								<span style='display: block;margin-top: 20upx;'>用户名</span>
								<p style='display: block;font-size:12upx;width: 234upx'>
									粉丝：{{item.fans}}关注：{{item.follow}}</p>
							</view>


						</view>
					</view>
					<!--  -->
					<view v-show='tabs==4'>
						<span style='display: block;text-align: center;margin-top: 20px;'>暂无数据</span>
					</view>
					<view v-show='tabs==5'>
						<span style='display: block;text-align: center;margin-top: 20px;'>暂无数据</span>
					</view>
					<view v-show='tabs==6'>
						<span style='display: block;text-align: center;margin-top: 20px;'>暂无数据</span>
					</view>
					<view v-show='tabs==7'>
						<span style='display: block;text-align: center;margin-top: 20px;'>暂无数据</span>
					</view>
					<view v-show='tabs==8'>
						<span style='display: block;text-align: center;margin-top: 20px;'>暂无数据</span>
					</view>
				</view>
				<view v-if="tabs==0 " class="bottom">

					<u-loadmore :status="status" />
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import Tab from '../../components/tab.vue'
	import {
		getList
	} from '../../common/api.js'
	export default {
		data() {
			return {
				keyword: '',
				list3: [
					'http://127.0.0.1:7001/public/whj/banner.png',
					'http://127.0.0.1:7001/public/whj/lan.png',
					'http://127.0.0.1:7001/public/whj/fen.png',
				],
				list: [],
				tabList: [{
					name: '推荐  ',
				}, {
					name: '最新',
				}, {
					name: '数码产品',
				}, {
					name: '图书文具',
				}, {
					name: '服饰鞋包',

				}, {
					name: '服饰鞋包',

				}, {
					name: '服饰鞋包',

				}, {
					name: '服饰鞋包',
				}, ],
				tabs: 0,
				shopList: [],
				news: [],
				item1: [],
				item2: [],
				status: 'loadmore',
			};
		},
		components: {
			Tab
		},
		onShow() {
			// console.log(this.tabs)
			this.$api.getShopList().then(res => {
				this.shopList = res.data
				// console.log(this.shopList)
				this.shopList.forEach(item => {
					if (item.type == '新品') {
						return this.news.push(item)
					} else if (item.type == '数码产品') {
						return this.item1.push(item)

					} else if (item.type == '图书文具') {
						return this.item2.push(item)

					}
				})
			})

			this.$api.getTopic().then(res => {
				this.list = res.data
			})

		},
		methods: {
			click(item) {
				this.tabs = item.index
			},
			onReachBottom() {
				this.status = 'loading';
				setTimeout(() => {
					this.status = 'nomore'
				}, 1000)
			},
			JumpClassification() {
				uni.navigateTo({
					url: '/pages/classification/classification'
				})
			},
			DisGoods(item) {
				console.log(item.id)
				uni.navigateTo({
					url: `/pages/lfyGoodsDetails1/lfyGoodsDetails1?id=${item.id}`
				})
			},
			aixintz() {
				uni.navigateTo({
					url: '/pages/lfyActivityDetails1/lfyActivityDetails1'
				})
			},
			search() {
				this.shopList.forEach(item => {
					console.log(item.search)
					if (this.keyword == item.search) {
						this.keyword = ''
						uni.navigateTo({
							url: `/pages/Search/Search?search=${item.search}`
						})

					}
				})


			},
			huati(item) {
				uni.navigateTo({
					url: `/pages/lfyTopicDetails1/lfyTopicDetails1?id=${item.id}`
				})
			},
			gengduo() {
				// getApp().globalData.square = 'second'
				getApp().globalData.square = 'third'
				uni.switchTab({
					url: '/pages/square/square'
				})
			},
			tiao(){
				getApp().globalData.square = 'second'
				uni.switchTab({
					url: '/pages/square/square'
				})
			},
			tiao1(){
				uni.navigateTo({
					url: '/pages/lfyActivityDetails1/lfyActivityDetails1'
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-box {
		width: 100%;

		.home-top {
			width: 100%;
			height: 500upx;

			.home-top-img {
				width: 100%;
				height: 400upx;
				background-image: url('http://127.0.0.1:7001/public/whj/tuoyuan.png');
				border-bottom-left-radius: 150upx;
				border-bottom-right-radius: 150upx;
			}
		}

		.home-nav {
			width: 100%;
			height: 190upx;

			.home-nav-box {
				float: left;
				margin-left: 35upx;
			}
		}

		.aixin {
			width: 90%;
			height: 480upx;
			margin: 0 auto;
			box-shadow: 1px 1px 4px #f8eeee;
			border-radius: 20px;

			.aixin-top {
				width: 100%;
				height: 120upx;
				display: flex;
				justify-content: space-between
			}
		}
	}

	.square {
		width: 100%;
		height: 600upx;
		margin-top: 80upx;

		.square-top {
			width: 90%;
			height: 120upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between
		}

		.square-con {
			width: 90%;
			height: 475upx;
			margin: 0 auto;
		}
	}

	.tuijian {
		width: 100%;
		height: 500upx;
		margin-top: 50upx;

	}




	.bottom {
		width: 100%;
		height: 200upx;
	}
</style>
